<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">日志管理</h3>
                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input type="text" name="table_search" id="searchNameId"
                               class="form-control pull-right" placeholder="用户名">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-search"
                                    id="search">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-default btn-delete"
                                    id="delete">删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="checkAll">全选</th>
                        <th>用户名</th>
                        <th>操作</th>
                        <th>请求方法</th>
                        <th>请求参数</th>
                        <th>IP</th>
                        <th>执行时长</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId">
                    <tr>
                        <td colspan="7">数据正在加载中...</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="pageId" class="box-footer clearfix" dm="100"></div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">
	$(function() {
		//加载数据和分页信息
		$("#pageId").load("doPageUI",function(){
			doGetObjects(); //异步加载用户行为日志信息
		});
		
		//注册全选的点击事件
		$("#checkAll").click(function(){
			var isCheck = $(this).prop("checked"); //true/false
			$("#tbodyId input:checkbox").prop("checked",isCheck);
		});
		
		//tbody中checkbox对象注册事件
		$("#tbodyId").on("click",".cBox",doChangeTheadCheckBoxState);
		
		//注册查询的点击事件和删除事件
		$(".input-group-btn")
		.on("click",".btn-search", doQueryObjects)
		.on("click",".btn-delete", doDeleteById)
	})
	
	function doChangeTheadCheckBoxState(){
		//1.获取tbody中所有checkbox对象的状态，并进行逻辑与操作
		var flag = true;//初始值不能为false
		$("#tbodyId input:checkbox").each(function(){
			flag = flag && $(this).prop("checked")
		})
		//2.修改tbody中checkbox对象的状态
		$("#checkAll").prop("checked",flag);
	}
	
	function doQueryObjects(){
		var pageCurrent = $("#pageId").data("pageCurrent",1);
		doGetObjects();
	}
	
	function doGetObjects() {
		//设置thead中checkbox对象的初始状态
		$("#checkAll").prop("checked",false);
		//debugger;//断点调试
		//1.定义url和参数
		var url = "log/doFindPageObjects"
		//? 请问data函数的含义是什么？(从指定元素上获取绑定的数据)
		//此数据会在何时进行绑定？(setPagination,doQueryObjects)
		var pageCurrent = $("#pageId").data("pageCurrent");
		var username = $("#searchNameId").val();
		//为什么要执行如下语句的判定，然后初始化pageCurrent的值为1
		//pageCurrent参数在没有赋值的情况下，默认初始值应该为1.
		if (!pageCurrent)
			pageCurrent = 1;
		
		var params = {
			"pageCurrent" : pageCurrent,
			"username" : username
		};//pageCurrent=2
		//2.发起异步请求
		//请问如下ajax请求的回调函数参数名可以是任意吗？可以,必须符合标识符的规范
		$.getJSON(url, params, function(result) {
			//请问result是一个字符串还是json格式的js对象？对象
			doHandleQueryResponseResult(result);
		});//特殊的ajax函数 }
	} 

	//处理查询操作返回的结果
	function doHandleQueryResponseResult(result){ //JsonResult
		console.log(result);	
		if(result.state==1){ //正常信息
			//1.呈现当前页的用户行为日志记录
			doSetTableBodyRows(result.data.records);
			//2.呈现当前页的分页信息(总记录数,总页数,当前页...)
			doSetPagination(result.data);
		}else{ //异常信息
			//若获取数据失败，清空数据
			//alert(result.message); //后续可能修改呈现异常信息的方式
			doHandleQueryResponseError(result.message);
		}
	}
	
	//处理日志查询时服务端响应的错误信息
	function doHandleQueryResponseError(message){
		//设置itbody中的内容信息
		$("#tbodyId").html(`<tr><td colspan='7'>${message}</td></tr>`);
		//将页码值重新赋值
		doSetPagination({"rowCount":0,"pagetCount":0,"pageCurrent":1});
	}
	
	//将用户行为日志记录呈现在table的tbody位置
	function doSetTableBodyRows(records){
		//1.获取tbody对象并清空内容
		var tBody=$("#tbodyId");
		tBody.empty();
		//2.在tbody中追加日志记录
		records.forEach(item=>{
			tBody.append(doCreateRow(item)); //基于数组的forEach函数迭代数组 =>为一个箭头运算符
		})
	}
	
	//基于数据创建当前行对象
	function doCreateRow(item){
		return `<tr>
			<td><input type="checkbox" value=${item.id} class="cBox"></td>
			<td>${item.username}</td>
			<td>${item.operation}</td>
			<td>${item.method}</td>
			<td>${item.params}</td>
			<td>${item.ip}</td>
			<td>${item.time}</td>
		</tr>`
	}
	
	//根据选中id删除
	function doDeleteById(){
		if(!confirm("确定删除吗?")) return;
		//获取所有的checkbox选择框的id
		var check = $("#tbodyId input:checked");
		//获取路径
		var url = "log/doDeleteById";
		//拼接id,用逗号分隔
		var arr = [];
		$("#tbodyId input:checkbox:checked").each(function(){
			arr.push($(this).val());
		})
		var params = {"id":arr.toString()}; //[1,2,3] -> 1,2,3
		//发送异步请求
		$.getJSON(url,params,function(result){
			//发送状态
			if(result.state==1){
				doRefreshAfterDeleteOK();
			}else{
				alert(result.message);
			}
		})
	}
	
	//删除以后的刷新操作:要么继续查询当前页数据，要么查询上一页数据(最后一页)
	function doRefreshAfterDeleteOK(){
		//1.获取当前页码值,总页数,全选状态
		var pageCurrent = $("#pageId").data("pageCurrent");
		var pageCount = $("#pageId").data("pageCount");
		var checkedAll = $("#checkAll").prop("checked");
		//2.基于当前页码值以及全选状态修改当前页码值
		if(pageCurrent == pageCount && checkedAll && pageCurrent>1){ //最后一页全选状态
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		//3.重新执行查询
		doGetObjects();
	}
		
	
		
	



</script>






